<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router'
import { ref, onMounted } from 'vue'
import {get} from '@/api/api'
import { statusList, typeList } from '@/utils'

const router = useRouter()
const route = useRoute()

const detailData = ref({})
const getData = async () => {
    let params = {
      code: route.query.code  
    }
    const res = await get('/c/query/order/detail', params);
    detailData.value = res.data?.data
}
onMounted( () => {
    getData()
})
const toPrev = () => {
    router.push('/progress')
}
const setStatus = (item) => {
    return statusList.filter((i) => { return item === i.value})[0]?.name
}
const setType = (item) => {
    return typeList.filter((i) => { return item === i.key})[0]?.name
}

</script>

<template>

  <div class="progress">
    <div class="progress-top">
        <div class="my-nav">
            <img src="@/assets/toPrev.png" alt=""  @click="toPrev()">
            <div class="my-item">查询详情</div>
        </div>
        <div class="content_all">
            <div class="content">
                <div class="flex_space"><span>查询类型</span><span class="gray">{{setType(detailData.queryType)}}</span></div>
                <div class="flex_space"><span>查询姓名</span><span class="gray">{{detailData.queryName}}</span></div>
                <div class="flex_space"><span>查询时间</span><span class="gray">{{detailData.createTime}}</span></div>
                <div class="flex_space"><span>订单编号</span><span class="gray">{{detailData.code}}</span></div>
                <div class="flex_space"><span>授权书</span><span class="gray">{{detailData.socialsecurityDetail}}</span></div>
                <div class="flex_space"><span>身份证号</span><span class="gray">{{detailData.idCardNo}}</span></div>
                <div class="flex_space"><span>查询状态</span><span :class="detailData.orderStatus === 'COMPLETED' ? 'finished' : 'pending'">{{setStatus(detailData.orderStatus)}}</span></div>
            </div>
            <div class="content" v-if="detailData.immovablesDetail">
                <div class="mb16">
                    <div>{{setType(detailData.queryType)}}查询结果</div>
                    <div class="gray">共{{detailData.immovablesDetail.authResults.length}}条记录</div>
                </div>
                <div class="mb20">
                    <div>请求流水号</div>
                    <div class="gray">{{detailData.immovablesDetail?.reqOrderNo}}</div>
                </div>
                <div class="mb20">
                    <div>审批状态</div>
                    <div class="gray">{{detailData.immovablesDetail?.approvalStatus}}</div>
                </div>
                <div class="mb20">
                    <div>审核不通过原因</div>
                    <div class="gray">{{detailData.immovablesDetail?.rejectReason || '-'}}</div>
                </div>
                <div class="mb20">
                    <div>当事人身份证</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.cardNum}}</div>
                </div>
                <div class="mb20">
                    <div>核查状态</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.authState}}</div>
                </div>
                <div class="mb20">
                    <div>是否重新核查</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.aa || '-'}}</div>
                </div>
                <div class="mb20">
                    <div>不动产权证号</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.authState}}</div>
                </div>
                <div class="mb20">
                    <div>坐落</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.resultList[0]?.location}}</div>
                </div>
                <div class="mb20">
                    <div>房屋面积</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.resultList[0]?.houseArea}}</div>
                </div>
                <div class="mb20">
                    <div>是否查封</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.resultList[0]?.isSealUp}}</div>
                </div>
                <div class="mb20">
                    <div>是否抵押</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.resultList[0]?.isMortgaged}}</div>
                </div>
                <div class="mb20">
                    <div>使用期限起始时间</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.resultList[0]?.rightsStartTime}}</div>
                </div>
                <div class="mb20">
                    <div>使用期限结束时间</div>
                    <div class="gray">{{detailData.immovablesDetail?.authResults[0]?.resultList[0]?.rightsEndTime}}</div>
                </div>
            </div>
            
            <div class="content" v-else>
                <div class="mb16">
                    <div>{{setType(detailData.queryType)}}查询结果</div>
                    <div class="gray">暂无结果</div>
                </div>
            </div>
        </div>
    </div>
    
  </div>
</template>

<style scoped>
.progress{
    background-color: #f6f6f6;
    padding-bottom: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    rotate: 0;
    right: 0;
}
.progress-top1{
    text-align: center;
    width: 100%;
}
.content{
    background: #fff;
    padding: 13px 16px;
    margin: 10px 16px;
    border-radius: 10px;
}
.flex_space{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.gray{
    color: #999;
}
.mb16{
    margin-bottom: 16px;
}
.mb20{
    margin-bottom: 20px;
    border-bottom: 1px solid #F1F0F0;
    padding-bottom: 20px;
}

.my-nav{
    position: relative;
    padding-top: 25px;
    margin-bottom: 15px;
}
.my-nav img{
    position: absolute;
    left: 16px;
}
.my-top{
    padding-bottom: 20px;
}
.progress-top img {
    width: 10px;
    display: inline-block;
    padding-top: 25px;
    padding-left: 5px;
    top: 0;
}

.my-item{
    text-align: center;
    width: 100%;
}
.content_all{
    height: calc(100vh - 85px);
    overflow-y: scroll;
}
.pending{
    color: #FF0505;
}
.finished{
    color: #4CB65B;
}
</style>
